<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <title>选项卡</title>
        <link href="css/mui.min.css" rel="stylesheet" />
        <script src="js/mui.min.js"></script>
        <script src="js/jquery-3.3.1.js"></script>
        <script src="js/jquery.getUrlParam.js"></script>
    </head>

    <body>
    	<!--<script>
    		function a(){
	    		id_index = location.search.slice(4);//接收id
	    		mui.toast(id_index);
	    	};
			a();
    	</script>-->
        <div class="mui-content">
            <nav id="bar" class="mui-bar mui-bar-tab">
                <a class="mui-tab-item mui-active" href="#" data-id="main" >
                    <span class="mui-icon mui-icon-compose"></span>
                    <span class="mui-tab-label">Receive Orders</span>
                </a>
                <a class="mui-tab-item" href="#" data-id="message" >
                    <span class="mui-icon mui-icon-checkmarkempty"></span>
                    <span class="mui-tab-label">Deliver Orders</span>
                </a>
                <a class="mui-tab-item" href="#" data-id="contact" >
                    <span class="mui-icon mui-icon-close"></span>
                    <span class="mui-tab-label">Retreated Orders</span>
                </a>
                <!--<a class="mui-tab-item" href="tab-setting.html" data-id="setting">
                    <span class="mui-icon mui-icon-gear"></span>
                    <span class="mui-tab-label">设置</span>
                </a>-->
            </nav>
        </div>
        <script src="js/mui.min.js"></script>
        <script>
            mui.init();
            var id_index = location.search.slice(4);//接收id
//	    	mui.toast(id_index);
			
//			$("#id_mian").attr("href","tab-main.html?id_mian="+id_index); 
//			$("#id_message").attr("href","tab-message.html?id_message="+id_index); 
//			$("#id_contact").attr("href","tab-contact.html?id_contact="+id_index); 
			
//          function main() {
//	            var tomainUrl = "tab-main.html?id_mian="+id_index;
//	            window.location.href = tomainUrl;
//       	}
//          function message() {
//	            var tomessageUrl = "tab-message.html?id_message="+id_index;
//	            window.location.href = tomessageUrl;
//       	}
//          function contact() {
//	            var tocontactUrl = "tab-contact.html?id_contact="+id_index;
//	            window.location.href = tocontactUrl;
//       	}
			
            mui.plusReady(function() {
                var self = plus.webview.currentWebview();
                var current = '';
                var styles = {
                    top: '0',
                    bottom: '51px'
                };
                var tabsConfig = {
                    main: {
                        url: 'tab-main.html?id_mian='+id_index,
                        styles: styles,
                        default: true
                    },
                    message: {
                        url: 'tab-message.html?id_message='+id_index,
                        styles: styles
                    },
                    contact: {
                        url: 'tab-contact.html?id_contact='+id_index,
                        styles: styles
                    },
//                  setting: {
//                      url: 'tab-setting.html',
//                      styles: styles
//                  }
                };
                var tabs = {};
                for (id in tabsConfig) {
                    tabs[id] = plus.webview.create(tabsConfig[id].url, id, tabsConfig[id].styles);
                    if (tabsConfig[id]['default']) {
                        self.append(tabs[id]);
                        current = id;
                    }
                }
                mui('#bar').on('tap', 'a', function(e) {
                    if (current == this.dataset.id) {
                        return;
                    }
                    tabs[this.dataset.id].show();
                    tabs[current].hide();
                    current = this.dataset.id;
                });
            });
        </script>
    </body>
</html>